<template lang="pug">
  el-drawer.commonDrawer(
    title="物资"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="fields"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
        labelWidth="146px"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 提交
</template>
<script>
import { addSubmit, getCategory } from '../api'

export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      submitting: false,
      categoryList: [],
      info: {}
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fields () {
      const { categoryList } = this
      return [
        {
          key: 'name',
          label: '物资名称',
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'consumable',
          label: '消耗品',
          type: 'switch',
          // fieldProps: {
          //   options: [
          //     { id: '1', name: '是' },
          //     { id: '0', name: '否' }
          //   ]
          // },
          rules: [{ required: true, message: '请输入' }],
          initialValue: false
        },
        {
          key: 'cid',
          label: '物资分类',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          fieldProps: {
            options: categoryList,
            props: { value: 'id', label: 'name' }
          }
        },
        {
          key: 'count',
          label: '数量',
          rules: [{ required: true, message: '请输入' }]
        }
      ]
    }
  },
  async created () {
    const categoryList = await getCategory() || []
    this.categoryList = categoryList
  },
  methods: {
    async submitHandle () {
      const values = await this.$refs.form.submitForm()
      console.log(values)
      this.submitting = true
      addSubmit({
        ...values
      }).then(() => {
        this.$emit('getList')
        this.$_handleCancel()
        this.$message.success('保存成功')
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
